import { MessageCard } from "@/ui/cpts/biz/XHSTalks/components/MessageList/components/MessageCard";
import { MessagePlaceholderCard } from "@/ui/cpts/biz/XHSTalks/components/MessageList/components/MessagePlaceholderCard";
import { getValueOrDie } from "@common/utils";
import { LoadRepliesButton } from "@/ui/cpts/biz/XHSTalks/components/MessageList/components/LoadRepliesButton";
import { LoadMoreButton } from "@/ui/cpts/biz/XHSTalks/components/MessageList/components/LoadMoreButton";
import { forwardRef, useImperativeHandle } from "react";
import { Poster } from "@/ui/cpts/biz/XHSTalks/meta";
import { useViewModel as useMentionViewModel } from "./mention.model.view";
import { useViewModel as useAllViewModel } from "./model.view";
import type { Props } from "./meta";

export const MessageList = forwardRef<{ post: Poster }, Props>(
  function MessageList(props, ref) {
    const useViewModel =
      props.category === "all" ? useAllViewModel : useMentionViewModel;
    const {
      setReplyTo,
      commentToReply,
      realSender,
      loadComments,
      loadSubComments,
      loading,
      loadBtnId,
      post,
      records,
      hasMore,
    } = useViewModel(props);

    useImperativeHandle(ref, () => ({
      post,
    }));
    return (
      <div className={"card-container"}>
        {commentToReply && realSender && props.category === "mention" && (
          <MessagePlaceholderCard sendAs={realSender} />
        )}
        {records.map((comment) => {
          return [
            <>
              <MessageCard
                comment={comment}
                key={comment.id}
                onReplyClick={setReplyTo}
                noteDeleted={props.noteDeleted}
              />
              {commentToReply?.id === comment.id &&
                realSender &&
                props.category === "all" && (
                  <MessagePlaceholderCard
                    sendAs={realSender}
                    key={`${comment.id}_placeholder`}
                  />
                )}
            </>,
            props.category === "all" &&
              comment.sub_comments?.map((subComment, idx) => {
                const subCommentsAmount = getValueOrDie(
                  comment.sub_comments?.length,
                );
                const hiddenCommentsAmount =
                  parseInt(comment.sub_comment_count ?? "0") -
                  subCommentsAmount;
                const isLastOne = idx === subCommentsAmount - 1;
                return (
                  <>
                    <MessageCard
                      key={subComment.id}
                      comment={subComment}
                      indentLevel={1}
                      onReplyClick={setReplyTo}
                    />
                    {commentToReply?.id === subComment.id && realSender && (
                      <MessagePlaceholderCard
                        key={`${subComment.id}_placeholder`}
                        sendAs={realSender}
                        indentLevel={1}
                      />
                    )}

                    {isLastOne && hiddenCommentsAmount > 0 && (
                      <LoadRepliesButton
                        key={`${subComment.id}_load_more`}
                        indentLevel={1}
                        hiddenReplyAmount={hiddenCommentsAmount}
                        onClick={loadSubComments(comment.id)}
                      />
                    )}
                  </>
                );
              }),
          ];
        })}

        {props.category === "all" && (
          <LoadMoreButton
            id={loadBtnId}
            loading={loading}
            hasMore={hasMore}
            onLoad={loadComments.run}
            onClick={loadComments.run}
          />
        )}
      </div>
    );
  },
);
